<template>
  <div class="relative w-80 h-80">
    <!-- 仪表盘背景 -->
    <div class="absolute inset-0 rounded-full border-8 border-white/10 bg-gradient-to-b from-slate-800 to-slate-900"></div>

    <!-- 刻度 -->
    <div
        v-for="(mark, index) in 12"
        :key="index"
        class="absolute top-1/2 left-1/2 w-1 h-8 bg-white/30 origin-center"
        :style="{
        transform: `translate(-50%, -50%) rotate(${index * 30}deg) translateY(-140px)`
      }"
    ></div>

    <!-- 指针 -->
    <div
        class="absolute top-1/2 left-1/2 w-2 h-32 bg-gradient-to-t from-red-400 to-red-600 origin-center transition-transform duration-300 ease-out"
        :style="{
        transform: `translate(-50%, -50%) rotate(${needleRotation}deg) translateY(-16px)`,
        boxShadow: isActive ? '0 0 20px rgba(239, 68, 68, 0.6)' : 'none'
      }"
    ></div>

    <!-- 中心圆 -->
    <div class="absolute top-1/2 left-1/2 w-8 h-8 bg-red-500 rounded-full border-4 border-white transform -translate-x-1/2 -translate-y-1/2"></div>

    <!-- 当前速度显示 -->
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
      <div class="text-4xl font-bold text-white tabular-nums">
        {{ formatDisplaySpeed }}
      </div>
      <div class="text-sm text-white/60 mt-1">
        {{ speedUnit }}
      </div>
      <div v-if="currentTestType !== 'idle'" class="text-xs text-white/40 mt-2">
        {{ testTypeLabel }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  speed: number
  maxSpeed: number
  isActive: boolean
  testType: 'download' | 'upload' | 'ping' | 'idle'
}

const props = withDefaults(defineProps<Props>(), {
  maxSpeed: 1000,
  isActive: false,
  testType: 'idle'
})

const needleRotation = computed(() => {
  const normalizedSpeed = Math.min(props.speed / props.maxSpeed, 1)
  return normalizedSpeed * 270 - 135 // -135° to 135°
})

const formatDisplaySpeed = computed(() => {
  if (props.testType === 'ping') {
    return props.speed.toFixed(0)
  }

  if (props.speed >= 1000) {
    return (props.speed / 1000).toFixed(1)
  } else if (props.speed >= 100) {
    return props.speed.toFixed(1)
  } else if (props.speed >= 10) {
    return props.speed.toFixed(1)
  } else {
    return props.speed.toFixed(2)
  }
})

const speedUnit = computed(() => {
  if (props.testType === 'ping') return 'ms'
  return props.speed >= 1000 ? 'Gbps' : 'Mbps'
})

const testTypeLabel = computed(() => {
  switch (props.testType) {
    case 'download': return '下载测试中'
    case 'upload': return '上传测试中'
    case 'ping': return '延迟测试中'
    default: return ''
  }
})
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>